import React, { Component } from 'react'
import {
  StyleSheet,
  View,
  ScrollView,
  Text,
  FlatList,
  Dimensions,
  TouchableOpacity
} from 'react-native'
const { width, height } = Dimensions.get('window')

class SearchInput extends Component {
  constructor(props) {
    super(props)

    this.chooseRoomScence = this.chooseRoomScence.bind(this)
    this.clear = this.clear.bind(this)
    this.state = {
      currentRoom: null,
      sceneRange: [
        {
          key: 0,
          value: '全屋'
        },
        {
          key: 999,
          value: '房间'
        },
      ],
      currentfloor: ''
    }
  }

  render() {
    console.warn(JSON.stringify(this.props.floorList))
    return (
      <View style={styles.container}>
        <ScrollView style={styles.content}>
          <Text style={styles.title}>场景范围</Text>
          <View style={styles.list}>
            {this._renderSceneRangelist(this.state.sceneRange)}
          </View>
          <Text style={styles.title}>楼层</Text>
          <View style={styles.list}>
            {this._renderFloorlist(this.props.floorList)}
          </View>
        </ScrollView>
        <View style={styles.bottomBtnView}>
          <TouchableOpacity onPress={this.clear} style={styles.content}>
            <View style={styles.bntView}>
              <Text style={styles.bntText}>清除</Text>
            </View>
          </TouchableOpacity>
          <TouchableOpacity onPress={this._filterScene} style={styles.content}>
            <View style={[styles.bntView, styles.primaryBtnView]}>
              <Text style={[styles.bntText, styles.primaryBtnText]}>完成</Text>
            </View>
          </TouchableOpacity>
        </View>
      </View>
    )
  }
  _renderSceneRangelist(list) {
    return list.map(item => {
      return (
        <TouchableOpacity onPress={() => {this.chooseRoomScence(item)}}>
          <View style={[styles.item, item.key === this.state.currentfloor && styles.activeItem]}>
            <Text style={[styles.itemText, item.key === this.state.currentfloor && styles.activeItemText]}>{item.value}</Text>
          </View>
        </TouchableOpacity>
      )
    })
  }
  _renderFloorlist(list) {
    console.warn('12321' + JSON.stringify(list))
    if(list && list.length){
      return list.map(item => {
        return (
          <TouchableOpacity onPress={() => {this.chooseRoomScence(item)}}>
            <View style={[styles.item, item.key === this.state.currentfloor && styles.activeItem]}>
              <Text style={[styles.itemText, item.key === this.state.currentfloor && styles.activeItemText]}>{item.value}</Text>
            </View>
          </TouchableOpacity>
        )
      })
    }
  }
  chooseRoomScence(item) {
    console.warn(item.key)
    this.setState({
      currentfloor: item.key
    })
  }
  clear() {
    this.setState({
      currentfloor: ''
    })
  }
  _filterScene = () => {
    this.props.filterScene(this.state.currentfloor)
  }
}

export default SearchInput

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ffffff'
  },
  content: {
    flex: 1,
  },
  title: {
    padding: 15,
    color: '#333333',
    fontSize: 15,
  },
  list: {
    flexDirection: 'row',
    flexWrap: 'wrap',
  },
  item: {
    width: (width * 0.7 - 45)/2,
    height: 36,
    marginBottom: 15,
    marginLeft: 15,
    borderRadius: 18,
    alignItems: 'center',
    justifyContent: 'center',
  },
  activeItem: {
    backgroundColor: '#B7ECF1',
  },
  itemText: {
    color: '#666666',
    fontSize: 13,
  },
  activeItemText: {
    color: '#00A5AD',
  },
  bottomBtnView: {
    height: 49,
    flexDirection: 'row',
  },
  bntView: {
    height: 49,
    alignItems: 'center',
    justifyContent: 'center',
  },
  primaryBtnView: {
    backgroundColor: '#26B9CE'
  },
  bntText: {
    fontSize: 14,
    color: '#333333',
  },
  primaryBtnText: {
    color: '#ffffff'
  }
})
